<template>
  <el-dialog :visible.sync="visible" title="变更责任人" :close-on-click-modal="false" @opened="handleOpened" @closed="handleClosed">
    <QupFormContainer :column="2">
      <el-form ref="form" :model="formData" :rules="formRules" label-width="100px">
        <el-form-item prop="marketCode" label="市场编码">
          <span>{{ selectData.marketCode }}</span>
        </el-form-item>
        <el-form-item prop="marketName" label="市场名称">
          <span>{{ selectData.marketName }}</span>
        </el-form-item>
        <el-form-item prop="shopCode" label="门店编码">
          <span>{{ selectData.shopCode }}</span>
        </el-form-item>
        <el-form-item prop="shopName" label="门店名称">
          <span>{{ selectData.shopName }}</span>
        </el-form-item>
        <el-form-item :key="selectData.id" prop="responsibleCode" label="责任人">
          <!-- <c-common-search-person
            v-if="selectData.marketType !== 'A'"
            key="customerCode"
            v-model="formData.responsibleCode"
            :label.sync="formData.responsibleName"
            :person-tel_res.sync="formData.responsiblePhone"
            :filters-raw="[]"
            contain-self
            :before-params="paramsJson=>{
              const filtersRaw = [
                { id: 'isAccountManager', property: 'isAccountManager', value: '1', operator: '=' }
              ]
              filtersRaw.push({ id: 'customerCode', property: 'customerCode', value: selectData.customerCode, operator: '=' })
              paramsJson.filtersRaw?paramsJson.filtersRaw.push(...filtersRaw):(paramsJson.filtersRaw=filtersRaw)
              $codeOrName(paramsJson.filtersRaw, 'adAccount', 'personName')
              return paramsJson
            }"
          /> -->
          <c-common-search-person-by-office
            key="office"
            v-model="formData.responsibleCode"
            :label.sync="formData.responsibleName"
            :person-tel_res.sync="formData.responsiblePhone"
            :query-office-code="selectData.agencyCode"
            contain-self
            :columns="[
              {
                prop: 'adAccount',
                label: '编码'
              },
              {
                prop: 'personName',
                label: '姓名'
              }
            ]"
          />
        </el-form-item>
        <el-form-item prop="responsibleName" label="责任人编码">
          <span>{{ formData.responsibleCode }}</span>
        </el-form-item>
        <el-form-item prop="responsiblePhone" label="责任人电话">
          <span>{{ formData.responsiblePhone }}</span>
        </el-form-item>
      </el-form>
    </QupFormContainer>
    <div class="btn-end">
      <c-button type="default" @click="handleCancel">取消</c-button>
      <c-button type="primary" @click="handleConfirm">确定</c-button>
    </div>
  </el-dialog>
</template>
<script>
import { personChange } from '@/api/channelTask2/monthTask'
export default {
  name: 'PersonChange',
  props: {
  },
  data() {
    return {
      visible: false,
      formData: {
        responsibleCode: '',
        responsibleName: '',
        responsiblePhone: ''
      },
      formRules: {
        responsibleCode: [{ required: true, message: '请选择责任人', trigger: 'change' }]
      },
      selectData: {}
    }
  },
  methods: {
    openDialog(row) {
      this.selectData = row
      this.visible = true
    },
    handleOpened() {
      Object.keys(this.formData).forEach(k => {
        this.$set(this.formData, k, this.selectData[k])
      })
    },
    handleClosed() {
      this.selectData = {}
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.resetFields()
        this.$refs.form && this.$refs.form.clearValidate()
        this.$set(this.formData, 'responsibleCode', '')
      })
    },
    handleCancel() {
      this.visible = false
    },
    handleConfirm() {
      return this.$refs.form.validate().then(() => {
        const data = { ...this.formData }
        data.id = this.selectData.id
        return personChange(data).then(res => {
          this.$message.success('操作成功')
          this.visible = false
          this.$emit('on-success')
        })
      })
    }
  }
}
</script>
